@import '../../styles/variables.less';

.dashboard-container {
  padding: 12px;
  
  .dashboard-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .dashboard-title {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      
      .anticon {
        margin-right: 8px;
        font-size: 22px;
        background: linear-gradient(135deg, #00a1ff, #00e1ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 2px rgba(0, 200, 255, 0.4));
      }
    }
    
    .dashboard-actions {
      .refresh-btn {
        color: @text-primary;
        
        &:hover {
          color: @text-light;
          background: rgba(0, 180, 255, 0.1);
          
          .anticon {
            color: @primary-light;
            text-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
          }
        }
      }
    }
  }
  
  // 卡片通用样式
  .ant-card {
    background: rgba(10, 30, 50, 0.5);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 20, 40, 0.5);
    overflow: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 10% 10%, rgba(0, 120, 255, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(0, 180, 255, 0.03) 0%, transparent 40%);
      pointer-events: none;
      z-index: 1;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 30, 60, 0.6);
      border-color: rgba(0, 180, 255, 0.3);
    }
    
    .ant-card-head {
      background: linear-gradient(90deg, rgba(0, 50, 100, 0.4), rgba(0, 30, 70, 0.2));
      border-bottom: 1px solid rgba(0, 180, 255, 0.2);
      
      .ant-card-head-title {
        color: #a3daff;
        font-size: 16px;
        font-weight: 500;
      }
    }
    
    .ant-card-body {
      position: relative;
      z-index: 2;
    }
  }
  
  // 统计卡片样式
  .stats-card {
    .ant-statistic-title {
      color: rgba(163, 218, 255, 0.7);
      font-size: 14px;
      margin-bottom: 12px;
    }
    
    .ant-statistic-content-value {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      letter-spacing: 1px;
      font-weight: 500;
      text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
    }
    
    .ant-statistic-content-prefix {
      margin-right: 8px;
      opacity: 0.8;
    }
    
    .trend {
      font-size: 14px;
      font-weight: normal;
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
      
      &.up {
        color: #52f0b3;
      }
      
      &.down {
        color: #ff7979;
      }
      
      .anticon {
        font-size: 12px;
      }
    }
    
    .data-trend {
      margin-top: 12px;
    }
  }
  
  // 图表卡片样式
  .chart-card {
    height: 100%;
    
    .echarts-for-react {
      position: relative;
      z-index: 10;
    }
  }
  
  // 表格卡片
  .table-card {
    height: 100%;
    
    .tech-table {
      .ant-table {
        background: transparent;
      }
      
      .ant-table-thead > tr > th {
        background: rgba(0, 50, 100, 0.4);
        color: #a3daff;
        border-bottom: 1px solid rgba(0, 180, 255, 0.3);
        transition: background 0.3s;
        
        &:hover {
          background: rgba(0, 70, 130, 0.5) !important;
        }
      }
      
      .ant-table-tbody > tr {
        transition: all 0.3s;
        
        &:hover {
          > td {
            background: rgba(0, 60, 120, 0.3) !important;
          }
        }
        
        > td {
          color: #a3daff;
          border-bottom: 1px solid rgba(0, 180, 255, 0.1);
          transition: background 0.3s;
          
          .order-id {
            font-family: monospace;
            color: #00dcff;
            font-weight: 500;
            letter-spacing: 0.5px;
          }
          
          .amount {
            color: #7ce8ff;
            font-weight: 500;
          }
          
          .status-tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0.15;
              z-index: -1;
              border-radius: 3px;
            }
            
            &.status-success {
              color: #52f0b3;
              
              &::before {
                background: #52f0b3;
              }
            }
            
            &.status-processing {
              color: #00c8ff;
              
              &::before {
                background: #00c8ff;
              }
            }
            
            &.status-pending {
              color: #ffbe3d;
              
              &::before {
                background: #ffbe3d;
              }
            }
          }
          
          .view-btn {
            color: #66cdff;
            
            &:hover {
              color: #00e1ff;
              text-shadow: 0 0 8px rgba(0, 225, 255, 0.8);
            }
          }
        }
        
        &:nth-child(odd) > td {
          background: rgba(0, 30, 70, 0.2);
        }
        
        &:nth-child(even) > td {
          background: rgba(0, 40, 80, 0.1);
        }
      }
    }
  }
} 